<template>
	<BaseContainer style="--w-left-gap: 50%">
		<ProjectSelect belongProject="elderlyMeal"></ProjectSelect>

		<el-calendar :model-value="nowDate">
			<template #header="{ date }">
				<span>菜品管理</span>
				<span>{{ date }}</span>
			</template>
			<template #date-cell="{ data }">
				<div class="fc gap-10" :class="data.isSelected ? 'is-selected' : ''">
					{{ data.day.split('-').slice(1)[1] }}
					<div class="tag-box" v-if="mouth == data.day.split('-').slice(1)[0]">
						<el-tag effect="dark" size="small" :type="_isSetMenu(data.day, 1) ? 'success' : 'info'" @click.native="handleClickType(data.day, 1)">
							早餐
						</el-tag>
						<el-tag effect="dark" size="small" :type="_isSetMenu(data.day, 2) ? 'warning' : 'info'" @click="handleClickType(data.day, 2)">
							午餐
						</el-tag>
						<el-tag effect="dark" size="small" :type="_isSetMenu(data.day, 3) ? 'danger' : 'info'" @click="handleClickType(data.day, 3)">
							晚餐
						</el-tag>
					</div>
				</div>
			</template>
		</el-calendar>

		<el-drawer v-model="drawer" :title="title" size="65%" class="padding">
			<MenuCheck
				v-if="drawer"
				ref="menuCheckEl"
				v-model="formMode.menuVoList"
				v-model:itemType="formMode.itemType"
				:dish_type_data="dish_type_data"
			></MenuCheck>
			<template v-slot:footer>
				<div class="fc">
					<el-button @click="handleCancle">取消所有</el-button>
					<el-button type="primary" @click="onSubmit">确认</el-button>
				</div>
			</template>
		</el-drawer>
	</BaseContainer>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import MenuCheck from './MenuCheck/index.vue'
import ProjectSelect from '@/views/homeCare/components/ProjectSelect/index.vue'
import { useCommonStore } from '@/stores/common'

const { queryObj } = storeToRefs(useCommonStore())

const d = new Date()
const m = d.getMonth() + 1
const mouth = m >= 10 ? m : `0${m}`
const nowDate = ref(d)
const drawer = ref(false)
const title = ref('菜单设置')
const dataListObj = ref({})
const menuCheckEl = ref(null)

const formMode = reactive({
	id: undefined,
	itemType: 1,
	menuVoList: [],
	type: '0',
	menuType: '',
	menuDate: '',
})

const dish_type_data = ref([])

const _isSetMenu = (day, type) => {
	const tempData = dataListObj.value[day] || []
	return tempData.find((item) => item.menuType == type)
}
const handleCancle = () => {
	drawer.value = false
}

const onSubmit = () => {
	const query = {
		...formMode,
		...queryObj.value,
	}

	const baseApi = formMode.id ? 'view_omMenu_edit' : 'view_omMenu_add'
	apiMod[baseApi](query).then((res) => {
		ElMessage.success('操作成功')
		getInitData()
	})
}
const handleClickType = (day, type) => {
	const nowData = dataListObj.value[day] || []
	formMode.menuType = type
	formMode.menuDate = day
	const strObj = {
		1: '早餐',
		2: '午餐',
		3: '晚餐',
	}
	title.value = `${strObj[type]}-菜单设置`
	const menuId = nowData.find((item) => item.menuType == type)?.id
	formMode.id = menuId
	apiMod.view_omMenu_view(menuId).then((res) => {
		drawer.value = true
		const dishList = res.data.dishList?.map((item) => ({ dishType: item.dishType, itemId: item.id, itemType: 0 })) || []
		const packageList = res.data.packageList?.map((item) => ({ dishType: '-99', itemId: item.id, itemType: 1 })) || []
		formMode.menuVoList = [...dishList, ...packageList]
	})
}

const getInitData = () => {
	apiMod.getDictItemList('DISH_TYPE').then((res) => {
		const data = res.data['DISH_TYPE']
		dish_type_data.value = data
	})

	apiMod
		.view_omMenu_list({
			menuYear: d.getFullYear(),
			menuMonth: mouth,
		})
		.then((res) => {
			dataListObj.value = res.data || {}
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped>
.is-selected {
	color: #1989fa;
}
.tag-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
</style>
